<!-- get value from params -->
{{ $folderDir:= .Get "dir" }}
{{ $class:= .Get "class" }}
{{ $height:= replace (replace (.Get "height") "px" "") "x" "" }}
{{ $width:= replace (replace (.Get "width") "px" "") "x" "" }}
{{ $resize:= .Get "resize" }}
{{ $webp:= .Get "webp" | default true }}
{{ $loading:= .Get "loading" | default "lazy" }}
{{ $command:= .Get "command" }}
{{ $option:= .Get "option" }}
{{ $zoomable:= .Get "zoomable" | default true }}

{{ $scratch := newScratch }}
{{ $page:= .Page }}
{{ $assetsImage:= resources.Match (add (string $folderDir) `/*`) }}
{{ $contentImage:= $page.Resources.Match (add (string $folderDir) `/*`) }}
{{ $staticImage:= print "static/" $folderDir }}


<!-- start of checking asset-image -->
{{ if $assetsImage }}
  <!-- start of image range -->
  <div
    class="{{ $class }} gallery {{ if eq $zoomable `true` }}
      zoomable
    {{ end }}">
    {{ range $assetsImage }}
      {{ $image := resources.Get . }}
      {{ $imageExt := path.Ext $image }}
      {{ if or (eq $imageExt `.jpg`) (eq $imageExt `.jpeg`) (eq $imageExt `.png`) (eq $imageExt `.webp`) (eq $imageExt `.svg`) (eq $imageExt `.gif`) (eq $imageExt `.ico`) }}
        {{ partial "image-pipe.html" (dict "Context" $scratch "Height" $height "Width" $width "Command" $command "Webp" $webp "Image" $image "Option" $option "Zoomable" $zoomable "Resize" $resize) }}
        {{ $imageHeight:= $scratch.Get "image-height" }}
        {{ $imageWidth:= $scratch.Get "image-width" }}
        {{ $imagePaths:= split .Name "/" }}
        {{ $imageAlt:= index $imagePaths (sub (len $imagePaths) 1)}}

        <div class="gallery-item">
          {{ if eq $zoomable `true` }}
            <a
              href="{{ $image.RelPermalink }}"
              style="display: block;"
              class="glightbox">
              <img
                loading="{{ $loading }}"
                src="{{ $scratch.Get `image` }}"
                class="img"
                style="margin: 0;"
                alt="{{ $imageAlt }}"
                onerror="this.onerror='null';this.src='{{ $scratch.Get `imageFallback` }}'" />
            </a>
          {{ else }}
            <img
              loading="{{ $loading }}"
              src="{{ $scratch.Get `image` }}"
              class="img"
              style="margin: 0;"
              alt="{{ $imageAlt }}"
              onerror="this.onerror='null';this.src='{{ $scratch.Get `imageFallback` }}'" />
          {{ end }}
        </div>
      {{ end }}
    {{ end }}
    <!-- end of image range -->
  </div>

  <!-- start of checking content-image -->
{{ else if $contentImage }}
  <!-- start of image range -->
  <div
    class="{{ $class }} gallery {{ if eq $zoomable `true` }}
      zoomable
    {{ end }}">
    {{ range $contentImage }}
      {{ $image:= $page.Resources.GetMatch (printf "*%s*" .) }}
      {{ $imageExt := path.Ext $image }}
      {{ if or (eq $imageExt `.jpg`) (eq $imageExt `.jpeg`) (eq $imageExt `.png`) (eq $imageExt `.webp`) (eq $imageExt `.svg`) (eq $imageExt `.gif`) (eq $imageExt `.ico`) }}
        {{ partial "image-pipe.html" (dict "Context" $scratch "Height" $height "Width" $width "Command" $command "Webp" $webp "Image" $image "Option" $option "Zoomable" $zoomable "Resize" $resize) }}
        {{ $imageHeight:= $scratch.Get "image-height" }}
        {{ $imageWidth:= $scratch.Get "image-width" }}
        {{ $imagePaths:= split .Name "/" }}
        {{ $imageAlt:= index $imagePaths (sub (len $imagePaths) 1)}}

        <div class="gallery-item">
          {{ if eq $zoomable `true` }}
            <a
              href="{{ $image.RelPermalink }}"
              style="display: block;"
              class="glightbox">
              <img
                loading="{{ $loading }}"
                src="{{ $scratch.Get `image` }}"
                class="img"
                style="margin: 0;"
                alt="{{ $imageAlt }}"
                onerror="this.onerror='null';this.src='{{ $scratch.Get `imageFallback` }}'" />
            </a>
          {{ else }}
            <img
              loading="{{ $loading }}"
              src="{{ $scratch.Get `image` }}"
              class="img"
              style="margin: 0;"
              alt="{{ $imageAlt }}"
              onerror="this.onerror='null';this.src='{{ $scratch.Get `imageFallback` }}'" />
          {{ end }}
        </div>
      {{ end }}
    {{ end }}
    <!-- end of image range -->
  </div>

  <!-- start of checking static-image -->
{{ else if os.FileExists $staticImage }}
  <div
    class="{{ $class }} gallery {{ if eq $zoomable `true` }}
      zoomable
    {{ end }}">
    {{ range (readDir $staticImage) }}
      {{ if and (ne .Name ".DS_Store") (not .IsDir) }}
        {{ $image := print "/" $folderDir "/" .Name }}
        {{ $imageExt := path.Ext $image }}
        {{ if or (eq $imageExt `.jpg`) (eq $imageExt `.jpeg`) (eq $imageExt `.png`) (eq $imageExt `.webp`) (eq $imageExt `.svg`) (eq $imageExt `.gif`) (eq $imageExt `.ico`) }}
        {{ $imagePaths:= split .Name "/" }}
        {{ $imageAlt:= index $imagePaths (sub (len $imagePaths) 1)}}

          <div class="gallery-item" data-i="{{ .IsDir }}">
            {{ if eq $zoomable `true` }}
              <a href="{{ $image }}" style="display: block;" class="glightbox">
                <img
                  loading="{{ $loading }}"
                  src="{{ $image }}"
                  class="img"
                  style="margin: 0;"
                  alt="{{ $imageAlt }}"
                  height="{{ $height }}"
                  width="{{ $width }}" />
              </a>
            {{ else }}
              <img
                loading="{{ $loading }}"
                src="{{ $image }}"
                class="img"
                style="margin: 0;"
                alt="{{ $imageAlt }}"
                height="{{ $height }}"
                width="{{ $width }}" />
            {{ end }}
          </div>
        {{ end }}
      {{ end }}
    {{ end }}
  </div>

  <!-- if directory does not exist -->
{{ else }}
  <strong style="display: inline-block; margin-top:15px">
    Nothing to show in [{{ site.BaseURL }}<span style="color:red">
      {{ $folderDir }}
    </span>
    ] or folder does not exist
  </strong>
{{ end }}